<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        /* 原有样式保持不变 */
        /* 新增选项卡样式 */
        .login-tabs {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 0.8rem;
            cursor: pointer;
            color: #666;
            transition: all 0.3s;
        }
        .tab-item.active {
            color: #1877f2;
            border-bottom: 2px solid #1877f2;
        }
        /* 验证码输入组样式 */
        .captcha-group {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .captcha-input {
            flex: 1;
        }
        .get-captcha-btn {
            width: 120px;
            padding: 0.75rem;
            background: #f5f6f7;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .get-captcha-btn:disabled {
            background: #e9ecef;
            cursor: not-allowed;
        }
        /* 隐藏表单 */
        .login-form {
            display: none;
        }
        .login-form.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-header">
        <h1>系统登录</h1>
    </div>

    <!-- 错误提示 -->
    <div th:if="${param.error}" class="error-message">
        <span th:if="${param.authType == 'password'}">用户名或密码错误！</span>
        <span th:if="${param.authType == 'sms'}">验证码错误或已过期！</span>
    </div>

    <!-- 登录方式选项卡 -->
    <div class="login-tabs">
        <div class="tab-item active" onclick="switchForm('password')">账号登录</div>
        <div class="tab-item" onclick="switchForm('sms')">手机验证码登录</div>
    </div>

    <!-- 账号密码登录表单 -->
    <form th:action="@{/login}" method="post" class="login-form active" id="passwordForm">
        <input type="hidden" name="authType" value="password">
        <div class="form-group">
            <input type="text" name="username" placeholder="用户名" required>
        </div>
        <div class="form-group">
            <input type="password" name="password" placeholder="密码" required>
        </div>
        <button type="submit" class="login-button">立即登录</button>
    </form>

    <!-- 手机验证码登录表单 -->
    <form th:action="@{/login/sms}" method="post" class="login-form" id="smsForm">
        <input type="hidden" name="authType" value="sms">
        <div class="form-group">
            <input type="tel" name="phone" placeholder="手机号码" required pattern="1[3-9]\d{9}">
        </div>
        <div class="captcha-group">
            <input type="text"
                   class="captcha-input"
                   name="smsCode"
                   placeholder="验证码"
                   required
                   maxlength="6">
            <button type="button"
                    class="get-captcha-btn"
                    onclick="sendSMSCode()"
                    id="smsBtn">获取验证码</button>
        </div>
        <button type="submit" class="login-button">立即登录</button>
    </form>
</div>

<script>
    // 切换登录表单
    function switchForm(type) {
        document.querySelectorAll('.tab-item').forEach(tab => {
            tab.classList[tab.onclick.toString().includes(type) ? 'add' : 'remove']('active')
        })
        document.getElementById('passwordForm').classList.toggle('active', type === 'password')
        document.getElementById('smsForm').classList.toggle('active', type === 'sms')
    }

    // 发送验证码倒计时
    let countdown = 60
    function sendSMSCode() {
        const phone = document.querySelector('input[name="phone"]').value
        if (!/^1[3-9]\d{9}$/.test(phone)) {
            alert('请输入有效的手机号码')
            return
        }

        // 调用后端发送验证码接口（示例）
        fetch('/open/sms/send?phone=' + phone)

        // 禁用按钮并开始倒计时
        const btn = document.getElementById('smsBtn')
        btn.disabled = true
        const timer = setInterval(() => {
            btn.textContent = `重新发送(${countdown})`
            if (countdown-- <= 0) {
                clearInterval(timer)
                btn.disabled = false
                btn.textContent = '获取验证码'
                countdown = 60
            }
        }, 1000)
    }
</script>
</body>
</html>